<template>
    <view
        class="tree-item"
        :class="{
            expand: treeItemData.expand,
            active: activeId === treeItemData.id,
            'no-child': !treeItemData.children || treeItemData.children.length === 0,
        }">
        <view class="tree-content" @click="_clickEvent(treeItemData)">
            <view class="border"></view>
            <text class="tree-label">{{ treeItemData.name }}</text>
        </view>
        <view v-if="treeItemData.children && treeItemData.children.length > 0" class="sub-tree">
            <!--TreeItem组件中调用TreeItem组件-->
            <NavTreeItem
                v-for="(item, index) in treeItemData.children"
                :key="index"
                :tree-item-data="item"
                :active-id="activeId"
                @treeClickEvent="_clickEvent" />
        </view>
    </view>
</template>

<script>
import NavTreeItem from "@/components/product/nav-tree-item.vue"
export default {
    name: "NavTreeItem",
    components: {
        NavTreeItem,
    },
    props: {
        treeItemData: {
            type: Object,
            default() {
                return {}
            },
        },
        activeId: {
            type: Number,
            default: -1,
        },
    },
    data() {
        return {}
    },
    methods: {
        // 节点点击事件
        _clickEvent(item) {
            this.$forceUpdate()
            this.$emit("treeClickEvent", item)
        },
    },
}
</script>
<style lang="scss">
.sub-tree {
    display: none;
    .tree-item {
        .tree-content {
            .tree-label {
                &:after {
                    width: 8rpx;
                    height: 8rpx;
                    right: 20rpx;
                }
            }
        }
    }
}

.tree-item {
    .tree-content {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        .tree-label {
            min-height: 98rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
            position: relative;
            padding: 0 30rpx;
            text-align: center;

            &:after {
                content: "";
                display: inline-block;
                position: absolute;
                right: 16rpx;
                top: 40rpx;
                width: 10rpx;
                height: 10rpx;
                transform: rotate(45deg);
                border: 1px solid;
                border-color: transparent currentColor currentColor transparent;
            }
        }
    }
}

.expand {
    background: $color-white;

    & > .sub-tree {
        display: block;
    }

    & > .tree-content {
        .tree-label {
            &:after {
                transform: rotate(-135deg);
                top: 48rpx;
            }
        }
    }
}

.active {
    & > .tree-content {
        .border {
            background: $app-color-main;
        }

        .tree-label {
            color: $app-color-main;
            background: $color-white;
        }
    }
}

.no-child {
    .tree-content {
        .tree-label {
            &:after {
                content: none;
            }
        }
    }
}

.border {
    height: 40rpx;
    width: 12rpx;
    background: $transparent;
    position: absolute;
    left: -6rpx;
    top: 50%;
    margin-top: -20rpx;
    border-top-right-radius: 20rpx;
    border-bottom-right-radius: 20rpx;
    z-index: 1;
}
</style>
